<template>
  <div class="loan-page">
    <!-- 顶部导航 -->
    <HeaderBar
      :currentName="_t18('loan_order', ['aams'])"
      :cuttentRight="cuttentRight"
      :border_bottom="true"
      :isCenter="true"
    />


    <!-- Tabs + 内容 -->
    <Tab :tabList="tabList" :active="curIndex" @change="changeIndex">
      <template #tabContent>
        <!-- 下拉刷新 -->
        <van-pull-refresh
          v-model="refreshing"
          @refresh="onRefresh"
          :loading-text="_t18('loading')"
          :loosing-text="_t18('release_refresh')"
        >
          <!-- 页面加载动画 -->
          <div v-if="showLoading" class="loading-box">
            <van-loading type="spinner" size="26px" color="#000" />
            <div class="loading-text">{{ _t18('loading') }}</div>
          </div>

          <!-- 数据列表 -->
          <div v-else class="loan-list-container">
            <van-list
              v-if="tabContentList.length > 0"
              v-model:loading="loading"
              :finished="finished"
              :finished-text="_t18('no_more_data')"
              :loading-text="_t18('loading')"
              @load="onLoad"
            >
              <div
                v-for="(item, index) in tabContentList"
                :key="index"
                class="loan-card"
              >
                <LoanItem :dataList="item" />
              </div>
            </van-list>

            <!-- 数据为空 -->
            <div v-else class="no-data-box">
              <Nodata />
            </div>
          </div>
        </van-pull-refresh>
      </template>
    </Tab>
  </div>
</template>

<script setup>
import HeaderBar from '@/components/HeaderBar/index.vue'
import LoanItem from './components/LoanItem.vue'
import { getLoanOrderList } from '@/api/loan.js'
import Tab from '@/components/Tab/index.vue'
import { dict } from '@/api/common/index'
import { _t18 } from '@/utils/public'

const refreshing = ref(false)
const showLoading = ref(true)
const loading = ref(false)
const finished = ref(false)

const curIndex = ref(0)
const pageNum = ref(1)
const pageSize = ref(5)
const total = ref(0)
const tabContentList = ref([])
const dictList = ref([])

const tabList = computed(() => [
  _t18('loan_tab_all', ['aams']),
  _t18('loan_tab_wait'),
  _t18('loan_tab_success'),
  _t18('loan_tab_err'),
  _t18('loan_tab_complete'),
  _t18('loan_tab_overdue')
])

onMounted(() => {
  getDict()
})

const getDict = async () => {
  const res = await dict('t_repay_type')
  if (res.code == '200') {
    dictList.value = res.data
  }
}

// 刷新
const onRefresh = () => {
  refreshing.value = true
  finished.value = false
  showLoading.value = true
  pageNum.value = 1
  tabContentList.value = []
  getList()
}

// 获取列表
const getList = () => {
  let params = `pageNum=${pageNum.value}&pageSize=${pageSize.value}`
  if (curIndex.value != 0) {
    params = `status=${curIndex.value - 1}&${params}`
  }

  getLoanOrderList(params).then((res) => {
    if (res.code == '200') {
      setTimeout(() => {
        showLoading.value = false
        refreshing.value = false
      }, 200)

      loading.value = false
      tabContentList.value = tabContentList.value.concat(res.rows)
      total.value = res.total

      if (tabContentList.value.length >= total.value) finished.value = true
      pageNum.value++
    } else {
      finished.value = true
      loading.value = false
      showLoading.value = false
      refreshing.value = false
    }
  })
}

const onLoad = () => {
  loading.value = true
  getList()
}

const changeIndex = (v) => {
  curIndex.value = v
  showLoading.value = true
  finished.value = false
  tabContentList.value = []
  pageNum.value = 1
  loading.value = true
}

watch(
  curIndex,
  () => {
    getList()
  },
  { immediate: true }
)

watch(tabContentList, (newValue) => {
  newValue.forEach((item) => {
    dictList.value?.forEach((itm) => {
      if (item.tloadProduct.repayType == itm.dictValue) {
        item['repayTypeLabel'] = itm.dictLabel
      }
    })
  })
})
</script>

<style lang="scss" scoped>
.loan-page {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 16px;
}

/* 加载动画 */
.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
  color: #000;
  .loading-text {
    font-size: 14px;
    margin-top: 8px;
  }
}

/* 列表容器 */
.loan-list-container {
  padding: 10px 12px;
}

/* 贷款卡片样式 */
.loan-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
}
.loan-card:active {
  transform: scale(0.98);
}

/* 空数据 */
.no-data-box {
  padding: 60px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ✅ Tab 区域强制改黑底白字蓝选中 */
:deep(.tab-container) {
  background-color: #000 !important; /* 黑色底 */
  box-shadow: none !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

:deep(.tab-header) {
  display: flex !important;
  justify-content: space-around !important;
  align-items: center !important;
  padding: 12px 0 !important;
}

:deep(.tab-item) {
  font-size: 14px !important;
  color: #fff !important; /* 白色字体 */
  font-weight: 400 !important;
  transition: all 0.3s !important;
}

:deep(.tab-item.active) {
  color: #4da6ff !important; /* 蓝色选中 */
  font-weight: 600 !important;
  position: relative !important;
}

:deep(.tab-item.active::after) {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 40%;
  height: 2px;
  background: #4da6ff !important; /* 蓝色下划线 */
  border-radius: 2px;
}


</style>
